<div id="bannerGroup">
    <!-- banners -->
    <div id="banners">
        <div class="tags-group-all">
            <!--  banners 使用默认值-->
            <div class="tags-group-wrapper"
                 th:if="${#strings.equals(theme.config.top.BannerLeft.bannersBackground, 'default')}">
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#989bf8">
                        <img th:with=" img = ${assets_link + '/images/icons/AfterEffect.png'}"
                             th:src="${img}"
                             title="AfterEffect">
                    </div>
                    <div class="tags-group-icon" style="background:#fff">
                        <img th:with=" img = ${assets_link + '/images/icons/Sketch.png'}"
                             th:src="${img}"
                             title="Sketch">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#57b6e6">
                        <img th:with=" img = ${assets_link + '/images/icons/Docker.png'}"
                             th:src="${img}"
                             title="Docker">
                    </div>
                    <div class="tags-group-icon" style="background:#4082c3">
                        <img th:with=" img = ${assets_link + '/images/icons/Photoshop.png'}"
                             th:src="${img}"
                             title="Photoshop">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#fff">
                        <img th:with=" img = ${assets_link + '/images/icons/FinalCutPro.png'}"
                             th:src="${img}"
                             title="FinalCutPro">
                    </div>
                    <div class="tags-group-icon" style="background:#fff">
                        <img th:with=" img = ${assets_link + '/images/icons/Python.png'}"
                             th:src="${img}"
                             title="Python">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#eb6840">
                        <img th:with=" img = ${assets_link + '/images/icons/Swift.png'}"
                             th:src="${img}"
                             title="Swift">
                    </div>
                    <div class="tags-group-icon" style="background:#8f55ba">
                        <img th:with=" img = ${assets_link + '/images/icons/Principle.png'}"
                             th:src="${img}"
                             title="Principle">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#f29e39">
                        <img th:with=" img = ${assets_link + '/images/icons/illustrator.png'}"
                             th:src="${img}"
                             title="illustrator">
                    </div>
                    <div class="tags-group-icon" style="background:#2c51db">
                        <img th:with=" img = ${assets_link + '/images/icons/CSS3.png'}"
                             th:src="${img}"
                             title="CSS3">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#f7cb4f">
                        <img th:with=" img = ${assets_link + '/images/icons/JS.png'}"
                             th:src="${img}"
                             title="JS">
                    </div>
                    <div class="tags-group-icon" style="background:#e9572b">
                        <img th:with=" img = ${assets_link + '/images/icons/HTML.png'}"
                             th:src="${img}"
                             title="HTML">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#df5b40">
                        <img th:with=" img = ${assets_link + '/images/icons/Git.webp'}"
                             th:src="${img}"
                             title="Git">
                    </div>
                    <div class="tags-group-icon" style="background:#e65164">
                        <img th:with=" img = ${assets_link + '/images/icons/Apifox.webp'}"
                             th:src="${img}"
                             title="Apifox">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#989bf8">
                        <img th:with=" img = ${assets_link + '/images/icons/AfterEffect.png'}"
                             th:src="${img}"
                             title="AfterEffect">
                    </div>
                    <div class="tags-group-icon" style="background:#fff">
                        <img th:with=" img = ${assets_link + '/images/icons/Sketch.png'}"
                             th:src="${img}"
                             title="Sketch">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#57b6e6">
                        <img th:with=" img = ${assets_link + '/images/icons/Docker.png'}"
                             th:src="${img}"
                             title="Docker">
                    </div>
                    <div class="tags-group-icon" style="background:#4082c3">
                        <img th:with=" img = ${assets_link + '/images/icons/Photoshop.png'}"
                             th:src="${img}"
                             title="Photoshop">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#fff">
                        <img th:with=" img = ${assets_link + '/images/icons/FinalCutPro.png'}"
                             th:src="${img}"
                             title="FinalCutPro">
                    </div>
                    <div class="tags-group-icon" style="background:#fff">
                        <img th:with=" img = ${assets_link + '/images/icons/Python.png'}"
                             th:src="${img}"
                             title="Python">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#eb6840">
                        <img th:with=" img = ${assets_link + '/images/icons/Swift.png'}"
                             th:src="${img}"
                             title="Swift">
                    </div>
                    <div class="tags-group-icon" style="background:#8f55ba">
                        <img th:with=" img = ${assets_link + '/images/icons/Principle.png'}"
                             th:src="${img}"
                             title="Principle">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#f29e39">
                        <img th:with=" img = ${assets_link + '/images/icons/illustrator.png'}"
                             th:src="${img}"
                             title="illustrator">
                    </div>
                    <div class="tags-group-icon" style="background:#2c51db">
                        <img th:with=" img = ${assets_link + '/images/icons/CSS3.png'}"
                             th:src="${img}"
                             title="CSS3">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#f7cb4f">
                        <img th:with=" img = ${assets_link + '/images/icons/JS.png'}"
                             th:src="${img}"
                             title="JS">
                    </div>
                    <div class="tags-group-icon" style="background:#e9572b">
                        <img th:with=" img = ${assets_link + '/images/icons/HTML.png'}"
                             th:src="${img}"
                             title="HTML">
                    </div>
                </div>
                <div class="tags-group-icon-pair">
                    <div class="tags-group-icon" style="background:#df5b40">
                        <img th:with=" img = ${assets_link + '/images/icons/Git.webp'}"
                             th:src="${img}"
                             title="Git">
                    </div>
                    <div class="tags-group-icon" style="background:#e65164">
                        <img th:with=" img = ${assets_link + '/images/icons/Apifox.webp'}"
                             th:src="${img}"
                             title="Apifox">
                    </div>
                </div>
            </div>
            
            <!--  banners 使用默认值-->
            <div class="tags-group-wrapper"
                 th:if="${#strings.equals(theme.config.top.BannerLeft.bannersBackground, 'techStack')}"
                 th:with="techs = ${theme.config.top.BannerLeft.techStack}">
                <th:block th:each="tech,iterStat : ${techs}">
                    <div class="tags-group-icon-pair" th:if="${iterStat.odd}">
                        <div class="tags-group-icon" th:style="'background:' + ${techOdd.background}"
                             th:with="techOdd = ${techs.get(iterStat.index - 1)}">
                            <img th:with=" img = @{${techOdd.url}}" th:src="${img}"
                                 th:title="${techOdd.name}">
                        </div>
                        
                        <div class="tags-group-icon" th:style="'background:' + ${techEven.background}"
                             th:with="techEven = ${tech}">
                            <img th:with=" img = @{${techEven.url}}" th:src="${img}"
                                 th:title="${techEven.name}">
                        </div>
                    </div>
                </th:block>
            </div>
        </div>
        <div class="banners-title">
            <th:block th:if="${not #strings.isEmpty(theme.config.top.BannerLeft.bannersTitleBig)}"
                      th:utext="${theme.config.top.BannerLeft.bannersTitleBig}"></th:block>
            <div class="banners-title-small"
                 th:if="${not #strings.isEmpty(theme.config.top.BannerLeft.bannersTitleSmall)}"
                 th:utext="${theme.config.top.BannerLeft.bannersTitleSmall}"></div>
        </div>
        <div class="banners-link" th:if="${not #lists.isEmpty(theme.config.top.BannerLeft.categoryGroup)}"
             th:with="groups = ${theme.config.top.BannerLeft.categoryGroup}">
            <div th:if="${#lists.size(theme.config.top.BannerLeft.categoryGroup) >= 1}">
                <a class="banners-link-btn blb-hot" th:href="@{${groups[0].url}}">
                    <i th:if="${not #strings.startsWith(groups[0].icon, 'http')}" th:class="${groups[0].icon}"></i>
                    <img th:if="${#strings.startsWith(groups[0].icon, 'http')}" th:src="@{${groups[0].icon}}"
                         alt="icon"/>
                    <div class="banners-link-title">[[${groups[0].title}]]</div>
                </a>
            </div>
            <div th:if="${#lists.size(theme.config.top.BannerLeft.categoryGroup) > 1}">
                <a class="banners-link-btn blb-top" th:href="@{${groups[1].url}}">
                    <i th:if="${not #strings.startsWith(groups[1].icon, 'http')}" th:class="${groups[1].icon}"></i>
                    <img th:if="${#strings.startsWith(groups[1].icon, 'http')}" th:src="@{${groups[1].icon}}"
                         alt="icon"/>
                    <div class="banners-link-title">[[${groups[1].title}]]</div>
                </a>
            </div>
        
        </div>
    </div>
    
    <!-- category -->
    <div class="categoryGroup" th:if="${not #lists.isEmpty(theme.config.top.BannerLeft.categoryGroup)}">
        <th:block th:if="${not #lists.isEmpty(theme.config.top.BannerLeft.categoryGroup)}"
                  th:with="groups = ${theme.config.top.BannerLeft.categoryGroup}">
            <div class="categoryItem" th:if="${#lists.size(theme.config.top.BannerLeft.categoryGroup) >= 1}">
                <a class="categoryButton CB1 bikan" th:href="@{${groups[0].url}}">
                    <span class="categoryButtonText">[[${groups[0].title}]]</span>
                    <i th:if="${not #strings.startsWith(groups[0].icon, 'http')}" th:class="${groups[0].icon}"></i>
                    <img th:if="${#strings.startsWith(groups[0].icon, 'http')}" th:src="@{${groups[0].icon}}"
                         alt="icon"/>
                </a>
            </div>
            <div class="categoryItem" th:if="${#lists.size(theme.config.top.BannerLeft.categoryGroup) > 1}">
                <a class="categoryButton remen" th:href="@{${groups[1].url}}">
                    <span class="categoryButtonText">[[${groups[1].title}]]</span>
                    <i th:if="${not #strings.startsWith(groups[1].icon, 'http')}" th:class="${groups[1].icon}"></i>
                    <img th:if="${#strings.startsWith(groups[1].icon, 'http')}" th:src="@{${groups[1].icon}}"
                         alt="icon"/>
                </a>
            </div>
        </th:block>
    </div>
    <th:block th:if="${#lists.size(theme.config.top.BannerLeft.categoryGroup) >= 1}"
              th:with="groups = ${theme.config.top.BannerLeft.categoryGroup}">
        <style>
            a.categoryButton.bikan {
                background: linear-gradient(to right, [[${groups[0].colorOneLight}]], [[${groups[0].colorTwoLight}]]);
                background-size: 200%;
            }
            
            [data-theme=dark] a.categoryButton.bikan {
                background: linear-gradient(to right, [[${groups[0].colorOneDark}]], [[${groups[0].colorTwoDark}]]);
                background-size: 200%;
            }
            
            .banners-link-btn.blb-hot {
                background: linear-gradient(to right, [[${groups[0].colorOneLight}]], [[${groups[0].colorTwoLight}]]);
                background-size: 200%
            }
            
            .banners-link-btn.blb-hot:hover,
            .banners-link-btn.blb-top:hover {
                background-position: 100% 0;
                cursor: pointer;
                color: var(--heo-white)
            }
        </style>
    
    </th:block>
    <th:block th:if="${#lists.size(theme.config.top.BannerLeft.categoryGroup) > 1}"
              th:with="groups = ${theme.config.top.BannerLeft.categoryGroup}">
        <style>
            a.categoryButton.remen {
                background: linear-gradient(to right, [[${groups[1].colorOneLight}]], [[${groups[1].colorTwoLight}]]);
                background-size: 200%;
            }
            
            [data-theme=dark] a.categoryButton.remen {
                background: linear-gradient(to right, [[${groups[1].colorOneDark}]], [[${groups[1].colorTwoDark}]]);
                background-size: 200%;
            }
            
            .banners-link-btn.blb-hot:hover,
            .banners-link-btn.blb-top:hover {
                background-position: 100% 0;
                cursor: pointer;
                color: var(--heo-white)
            }
            
            .banners-link-btn.blb-top {
                background: linear-gradient(to right, [[${groups[1].colorOneLight}]], [[${groups[1].colorTwoLight}]]);
                background-size: 200%
            }
        </style>
    
    </th:block>

</div>
